<mat-card class='card-demo'>
  <mat-card-title>
    <a href='https://mzl.la/2vvxj25'
       target='_blank'>
      Mozilla Holy-Grail Layout
    </a>
  </mat-card-title>
  <mat-card-subtitle>
    Illustrated here is the case where the page layout suited to a browser window must be
    optimized for a smart phone window. Not only must the elements reduce in size, but the order
    in which they are presented must change. Flexbox makes this very simple
  </mat-card-subtitle>
  <mat-card-content>
    <div class="containerX">
      <div class="colorNested box" fxLayout="column">
        <header>header</header>
        <div class="main" [fxLayout]="direction" fxLayout.xs="column" fxFlex
             (click)="toggleDirection()">
          <nav fxFlex="1 6 20%" fxFlexOrder fxFlexOrder.xs="2"> nav</nav>
          <article fxFlex="3 1 60%" fxFlexOrder fxFlexOrder.xs="1"> article</article>
          <aside fxFlex="1 6 20%" fxFlexOrder fxFlexOrder.xs="3"> aside</aside>
        </div>
        <footer>footer</footer>
      </div>
    </div>
  </mat-card-content>
  <mat-card-footer class="bottomPad">
    <div class="hint">&lt;div fxLayout="{{ direction }}" fxLayout.xs="column" &gt;</div>
  </mat-card-footer>
</mat-card>
